{% extends 'base.html' %}
{% load staticfiles %}
{% block content %}
    <div class="about_banner">
        <div class="container">
            <h2>Article Single</h2>
            <span class="breadcrumbs"><a href="index.html"><i class="fa fa-home home_1"></i></a> / <a
                    href="article.html" class="home_desc">Article</a> / <span>Article_Single</span></span>
        </div>
    </div>
    <div class="about_top">
        <div class="container">
            <div class="col-md-3 article">
                <section class="slider_1">
                    <div class="flexslider">
                        <ul class="slides">
                            <li>
                                <div class="article_box">
                                    <div class="article_img">
                                        <img src="images/c13.jpg" class="img-responsive" alt=""/>
                                    </div>
                                    <h3>admin</h3>
                                    <p>Lorem ipsum dolor sit amet, mauris suspendisse viverra eleifend tortor tellus
                                        suscipit, tortor aliquet at nulla mus, dignissim neque, nulla neque. Ultrices
                                        proin mi urna nibh.</p>
                                    <div class="social-ul">
                                        <ul>
                                            <li class="social-facebook"><a href="#"><i class="fa fa-facebook"></i></a>
                                            </li>
                                            <li class="social-twitter"><a href="#"><i class="fa fa-twitter"></i></a>
                                            </li>
                                            <li class="social-google"><a href="#"><i class="fa fa-google-plus"></i></a>
                                            </li>
                                            <li class="social-linkedin"><a href="#"><i class="fa fa-linkedin"></i></a>
                                            </li>
                                            <li class="social-youtube"><a href="#"><i
                                                    class="fa fa-youtube-play"></i></a></li>
                                        </ul>
                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                            </li>
                            <li>
                                <div class="article_box">
                                    <div class="article_img">
                                        <img src="images/c14.jpg" class="img-responsive" alt=""/>
                                    </div>
                                    <h3>admin</h3>
                                    <p>There are many variations of passages of Lorem Ipsum available, but the majority
                                        have suffered alteration in some form, by injected humour, or randomised words
                                        which.</p>
                                    <div class="social-ul">
                                        <ul>
                                            <li class="social-facebook"><a href="#"><i class="fa fa-facebook"></i></a>
                                            </li>
                                            <li class="social-twitter"><a href="#"><i class="fa fa-twitter"></i></a>
                                            </li>
                                            <li class="social-google"><a href="#"><i class="fa fa-google-plus"></i></a>
                                            </li>
                                            <li class="social-linkedin"><a href="#"><i class="fa fa-linkedin"></i></a>
                                            </li>
                                            <li class="social-youtube"><a href="#"><i
                                                    class="fa fa-youtube-play"></i></a></li>
                                        </ul>
                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </section>
            </div>
            <div class="col-md-9 column-15">
                <h6>Article Posts</h6>
                <div class="single_post_bottom clearfix">
                    <div class="col-md-4 article_post">
                        {% if article.is_reproduce %}
                            <div class="single_post">原文来至：<a class="heading_font"
                                                             href="{{ article.reproduce_url }}">{{ article.reproduce_user }}</a>
                            </div>
                        {% else %}
                            <div class="single_post">本文作者：<a class="heading_font"
                                                             href="{% url 'article:article_list' category %}">{{ article.user }}</a>
                            </div>
                        {% endif %}
                    </div>
                    <div class="col-md-4 article_post text-center" style="width: 230px;">
                        <div class="single_post_meta">
                            <span class="post_date">2016年7月15日</span>
                            <span class="post_views"><i class="fa fa-eye"></i> <span>280</span></span>
                            <span class="post_likes">
			      <span class="cstheme_likes cstheme_add_like">
			        <i class="fa fa-heart"></i>
			        <span class="likes_count">20</span>
			      </span>
			    </span>
                            <span class="post-meta-comments"><i class="fa fa-comments"></i>2</span>
                        </div>
                    </div>
                    <div class="col-md-4 article_post text-right" style="width: 200px;">
                        <a class="social_link facebook" href=""><i class="fa fa-facebook"></i></a>
                        <a class="social_link twitter" href=""><i class="fa fa-twitter"></i></a>
                        <a class="social_link linkedin" href=""><i class="fa fa-google-plus"></i></a>
                    </div>
                </div>
                {% autoescape off %}
                    {{ article.content }}
                {% endautoescape %}
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
{% endblock %}
